<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Vue.element example</title>
    <script src="https://rawgit.com/webcomponents/webcomponentsjs/v0.6.1/webcomponents.min.js"></script>
    <script src="https://rawgit.com/yyx990803/vue/0.11.10/dist/vue.js"></script>
    <script src="../vue-element.js"></script>
  </head>
  <body>

    <my-element msg="custom message">
      original content
    </my-element>

    <script>
      /**
       * Usage example, exactly the same with Vue.component,
       * except it's a real custom element (in supported browsers)
       */
      Vue.element('my-element', {
        shadow: true,
        template:
          '<h1>This is a Vue custom element!</h1>' +
          '<h2>{{msg}}</h2>' +
          '<content></content>',
        paramAttributes: ['msg'], // use `props` for Vue 0.12+
        data: function () {
          return {
            msg: 'default message'
          }
        },
        attached: function () {
          console.log('attached!')
        },
        detached: function () {
          console.log('detached!')
        }
      })
    </script>
  </body>
</html>